<template>
  <div class="students-details">
    <GoBack :title="title" />
    <div class="details-students-info">
      <div class="logo-info"></div>
      <div class="btn-info">
        <!-- <el-button type="primary">报名</el-button>-->
        <router-link
          :to="'/registrar/studentsSignUp/index/' + studentsId"
          class="link-type"
        >
          <el-button type="primary" style="margin-right: 12px">报名</el-button>
        </router-link>
        <el-button
          v-show="studentsDetails.stage !== 5"
          type="primary"
          @click="toTrail"
          v-hasPermi="['trail:calss:add']"
          >试听</el-button
        >
        <el-button @click="openEdit">编辑资料</el-button>
        <!-- v-if="![1, 3, 5].includes(studentsDetails.stage)" -->
        <!-- v-hasPermi="['student:to:history']" -->
        <el-button
          @click="isShowDialog = true"
          v-show="![1, 3, 5].includes(studentsDetails.stage)"
          v-hasPermi="['student:to:history']"
          >转为历史学员</el-button
        >
      </div>
      <div class="basic-info">
        <span class="name">{{ studentsDetails.name }}</span>
        <el-icon v-if="studentsDetails.gender == '1'" style="color: #fb6465"
          ><Female
        /></el-icon>
        <el-icon
          v-else-if="studentsDetails.gender == '0'"
          style="color: #4791ed"
          ><Male
        /></el-icon>
        <span class="age" v-if="studentsDetails.ageName"
          >{{ studentsDetails.ageName }}岁</span
        >
      </div>
      <div class="type-info">
        {{
          studentsDetails.stage === 1
            ? "意向学员"
            : studentsDetails.stage === 2
            ? "在读学员"
            : studentsDetails.stage === 3
            ? "跟进学员"
            : studentsDetails.stage === 4
            ? "报读学员"
            : studentsDetails.stage === 5
            ? "历史学员"
            : "未知状态"
        }}
      </div>
      <el-row class="detail-info">
        <el-col :span="8">
          <p style="color: #666">
            <span style="margin-right: 10px; color: #333">出生日期:</span
            >{{ studentsDetails.birthday }}
          </p>
          <p><span>就读学校:</span>{{ studentsDetails.attendSchool }}</p>
          <p><span>当前年级:</span>{{ studentsDetails.gradeName }}</p>
          <!-- <p><span>学号:</span>{{ studentsDetails.idcard }}</p> -->
        </el-col>
        <el-col :span="8">
          <p>
            <span
              >{{
                studentsDetails.defaultFamilyRel === "无"
                  ? "家长"
                  : studentsDetails.defaultFamilyRel
              }}手机:</span
            >{{ studentsDetails.defaultMobile }}
          </p>
          <p v-if="studentsDetails.backupUser">
            <span
              >{{
                studentsDetails.backFamilyRel === "无"
                  ? "备用"
                  : studentsDetails.backFamilyRel
              }}手机:</span
            >{{ studentsDetails.backMobile }}
          </p>
          <p><span>学员来源:</span>{{ studentsDetails.joinName }}</p>
        </el-col>
        <el-col :span="8">
          <p><span>跟进人:</span>{{ studentsDetails.counselor }}</p>
          <p><span>学管师:</span>{{ studentsDetails.management }}</p>
          <p><span>学员创建人:</span>{{ studentsDetails.creatName }}</p>
          <p><span>创建时间:</span>{{ studentsDetails.addTime }}</p>
          <p><span>备注:</span>{{ studentsDetails.remark }}</p>
        </el-col>
      </el-row>
    </div>
    <div class="details-students-tabs">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="报读课程" name="1">
          <RegisterTabs
            :studentId="studentsId"
            @update:unClassList="unClass"
            ref="registerRef"
          />
        </el-tab-pane>
        <el-tab-pane label="跟进管理" name="2" v-if="studentsDetails.stage !== 1">
          <FollowUpTabs :studentId="studentsId" />
        </el-tab-pane>
        <!-- <el-tab-pane label="消费记录" name="3"
          >功能尚在开发,敬请期待</el-tab-pane
        > -->
        <el-tab-pane label="上课记录" name="4"
          ><RecordTabs :studentId="studentsId" :active="recordTabAsctive"
        /></el-tab-pane>
        <!-- <el-tab-pane label="考勤记录" name="5"
          >功能尚在开发,敬请期待</el-tab-pane
        >
        <el-tab-pane label="成长档案" name="6"
          >功能尚在开发,敬请期待</el-tab-pane
        >
        <el-tab-pane label="学员动态" name="7"
          >功能尚在开发,敬请期待</el-tab-pane
        > -->
        <el-tab-pane label="积分" name="8"
          ><GrantByPer :studentId="studentsId"
        /></el-tab-pane>
        <!-- <el-tab-pane label="优惠券" name="9">功能尚在开发,敬请期待</el-tab-pane> -->
      </el-tabs>
    </div>
    <EditStudents
      :type="type"
      :isShowEdit="isShowEdit"
      :students="studentsDetails"
      @update:isShowEdit="updateShowEdit"
      @update:students="updateStudents"
    />
    <!-- 转为历史学员dialog -->
    <el-dialog
      v-model="isShowDialog"
      title="转历史学员提醒"
      width="50%"
      @close="cancelClick"
    >
      <el-divider style="margin-top: 0" />
      <div class="dialog-box">
        <div class="dialog-warning">
          <el-icon color="#E6A23C" size="16px" style="margin-right: 10px"
            ><Warning
          /></el-icon>
          转为历史学员后，学员将被移出所在班级，以下报读课程将自动全部结课，未消耗课时将全部<span
            style="color: #f56c6c"
            >自动清零</span
          >。
        </div>
        <el-table
          border
          ref="multipleTableRef"
          :data="unClassList"
          style="width: 100%; margin-bottom: 20px"
        >
          <el-table-column
            label="订单号"
            fixed="left"
            show-overflow-tooltip
            :formatter="formatName"
            align="center"
          >
            <template #default="scope">
              {{ scope.row.orderNo }}
            </template>
          </el-table-column>
          <el-table-column
            label="剩余数量"
            show-overflow-tooltip
            :formatter="formatName"
            align="center"
          >
            <template #default="scope">
              {{
                scope.row.remainderLesson > 0
                  ? Math.abs(scope.row.remainderLesson)
                  : "0"
              }}课时
            </template>
          </el-table-column>
          <el-table-column
            label="课程状态"
            show-overflow-tooltip
            :formatter="formatName"
            align="center"
          >
            <template #default="scope">
              {{ scope.row.exhausted === "1" ? "未结课" : "已结课" }}
            </template>
          </el-table-column>
        </el-table>
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="turnHistoryForm"
          :rules="rules"
          label-width="auto"
          status-icon
        >
          <el-form-item label="转化原因" prop="turnHistoryReason">
            <el-input
              v-model="turnHistoryForm.turnHistoryReason"
              type="textarea"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="toChangeGraduation">
            确定转历史
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- <router-view></router-view>  -->
  </div>
</template>

<script setup>
import { toRef } from "@vueuse/core";
import { ref, reactive, onBeforeMount } from "vue";
import { useRoute } from "vue-router";
import {
  getStudentsInfo,
  changeGraduation,
} from "@/api/studentManagement/index.js";
import EditStudents from "../components/editStudents/index.vue";
import GoBack from "@/components/GoBack/index.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import FollowUpTabs from "./components/followUpTabs.vue";
import RegisterTabs from "./components/registerTabs.vue";
import RecordTabs from "./components/recordTabs/index.vue";
import GrantByPer from "@/views/marketing/points/grantByPer.vue";
const { proxy } = getCurrentInstance();

const type = ref("编辑");
//接收学员ID
const route = useRoute();
const studentsId = route.params.studentsId;
const title = route.meta.title;

//前往试听课页面
const router = useRouter();
const toTrail = () => {
  router.push({
    name: "trail",
    params: { studentsId: studentsId },
  });
};
//获取学员基本信息
const studentsDetails = ref({});
const toGetStudentsInfo = async () => {
  console.log("getStudentsInfo");

  // console.log('iooooo',proxy.addDateRange(value1.value,[]));
  const params = {
    id: studentsId,
  };
  try {
    const res = await getStudentsInfo(params);
    if (res.code == 200) {
      studentsDetails.value = res.data;
      studentsDetails.value.gender = String(studentsDetails.value.gender);
      studentsDetails.value.defaultFamilyRel =
        studentsDetails.value.defaultUser.familyRel;
      studentsDetails.value.defaultMobile =
        studentsDetails.value.defaultUser.mobile;
      if (studentsDetails.value.backupUser) {
        studentsDetails.value.backFamilyRel =
          studentsDetails.value.backupUser.familyRel;
        studentsDetails.value.backMobile =
          studentsDetails.value.backupUser.mobile;
      }
    }
  } catch (error) {
    console.error("1111获取学生信息失败:", error);
  }
};
onBeforeMount(toGetStudentsInfo);

//编辑资料
const isShowEdit = ref(false);
const openEdit = () => {
  isShowEdit.value = true;
};
const updateShowEdit = (value) => {
  isShowEdit.value = value;
};
const updateStudents = (value) => {
  console.log("updead");
  toGetStudentsInfo();
  //   Object.assign(studentsDetails, value)
};
//转为历史学员部分
const turnHistoryForm = ref({
  turnHistoryReason: null,
});
const cancelClick = () => {
  isShowDialog.value = false;
  turnHistoryForm.value.turnHistoryReason = null;
};
//表单校验
const rules = reactive({
  turnHistoryReason: [
    { required: true, message: "请输入转化原因", trigger: "blur" },
  ],
});

const isShowDialog = ref(false);
const registerRef = ref(null);
const toChangeGraduation = () => {
  proxy.$refs["ruleFormRef"].validate(async (valid) => {
    if (valid) {
      const params = {
        id: studentsId,
        turnHistoryReason: turnHistoryForm.value.turnHistoryReason,
      };
      try {
        const res = await changeGraduation(params);
        if (res.code == 200) {
          if (res.msg === "成功") {
            ElMessage({
              type: "success",
              message: "转化成功",
            });
            toGetStudentsInfo();
            registerRef.value.toGetIstSecond();
          } else {
            ElMessage({
              type: "error",
              message: res.msg,
            });
          }
          cancelClick();
        } else {
          proxy.$modal.msgError("转为历史学员失败");
        }
      } catch (error) {
        console.error("转为历史学员失败:", error);
      }
    }
  });
};
const unClassList = ref([]);
const unClass = (val) => {
  unClassList.value = val;
};

//tabs标签页功能
const activeName = ref("1");
const recordTabAsctive = ref("one");
if (route.query.active && route.query.active == "4") {
  activeName.value = route.query.active;
  recordTabAsctive.value = "two";
}

const handleClick = (tab, event) => {
  console.log(tab, event);
};
</script>

<style lang="scss" scoped>
.students-details {
  height: 100%;
  overflow: auto;
  .details-students-info {
    position: relative;
    padding: 0px 10% 20px;
    margin-bottom: 20px;
    // background-color: red;
    box-shadow: 5px 5px 5px rgb(213, 217, 208);
    .logo-info {
      position: absolute;
      left: 15px;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background-image: url("@/assets/logo/jnLogo.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    .btn-info {
      display: flex;
      //  gap: 10px;
      position: absolute;
      right: 15px;
    }
    .basic-info {
      // background-color: red;
      font-size: 18px;

      .name {
        color: #373737;
        margin-right: 20px;
      }
      .age {
        margin-left: 10px;
        font-size: 14px;
      }
    }
    .type-info {
      display: inline-block;
      padding: 0 10px;
      margin-top: 10px;
      font-size: 12px;
      color: #3bbdaa;
      border: 1px solid #3bbdaa;
    }
    .detail-info {
      p {
        span {
        }
      }
    }
  }
  .details-students-tabs {
    padding: 20px;
    box-shadow: 5px 5px 5px rgb(213, 217, 208);

    // background-color: blue;
  }
  .dialog-box {
    .dialog-warning {
      padding: 8px 10px;
      margin-bottom: 20px;
      background-color: #ecf5ff;
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #000;
    }
  }
}
</style>
<style lang="scss" scoped>
/* .demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
} */
:deep(.demo-tabs) {
  .el-tabs__content {
    /* padding: 20px; */
    overflow: visible;
  }
}
:deep(.el-tabs__nav-scroll) {
  .el-tabs__nav {
    // display: flex !important;
    // justify-content: flex-end !important;
    .el-tabs__item {
      font-size: 16px;
      // color: rgba(0, 0, 0, 0.6);
      padding: 0 50px;
    }
  }
}
</style>
